<template>
	<view id="master-list">
		<view class="header-card">
			<view class="card-upper-half">
				<view class="title">您的升级码({{codeTips}})</view>
				<view class="code">{{noUsedCode}}</view>
				<view class="tips">一个升级码只能邀请一个用户</view>
				<view class="copy-btn" @click="copyCode">复制</view>
				<view class="card-left-bottom"></view>
				<view class="card-right-bottom"></view>
			</view>
			<view class="card-lower-half">
				<view class="code-list-btn" @click="toUpgradeCodeList">历史升级码</view>
				<button class="generate-btn"@click="isShowModal = true">生成升级码</button>
				<view class="upgrade-code">
					<view class="btn" @click="isShowRulesModal = true">团队奖励</view>
				</view>
				<view class="card-left-top"></view>
				<view class="card-right-top"></view>
			</view>
		</view>
		<view class="page-content">
			<view class="nav-bar">
				<view class="nav-tab" :class="listType=='inactivated' ? 'active':''" @click="changeTab('inactivated')">未激活用户({{unactivatedNum}})</view>
				<view class="nav-tab" :class="listType=='activated' ? 'active':''" @click="changeTab('activated')">已激活用户({{activatedNum}})</view>
			</view>
			<view class="tab-content">
				<view class="inactivated-box" v-show="listType == 'inactivated'">
					<view class="list">
						<view class="list-card" v-for="(item,index) in unactivatedList" :key="index">
							<view class="list-card-header">
								<image class="header-img" :src="item.head_img_url" v-if="item.head_img_url" mode=""></image>
								<image class="header-img" src="../../static/img/header_image.png" mode="" v-else></image>
								<view class="phone-name">
									<view class="name">{{item.push_phone}} <view class="copy-btn"  @click="copyPhone(item.push_phone)">复制</view></view>
									<view class="phone">{{item.push_name}}/{{item.push_id_code}}</view>
								</view>
							</view>
							
						</view>
						<view class="no-data-tips" v-if="unactivatedList.length == 0">
							<image class="no-data-img" src="../../static/img/no-data-img.png" mode=""></image>
							<view>暂无数据</view>
						</view>
					</view>
				</view>
				<view class="activated-box" v-show="listType == 'activated'">
					<view class="list">
						<view class="list-card"  v-for="(item,index) in activatedList" :key="index">
							<view class="list-card-header">
								<image class="header-img" :src="item.head_img_url" v-if="item.head_img_url" mode=""></image>
								<image class="header-img" src="../../static/img/header_image.png" mode="" v-else></image>
								<view class="phone-name">
									<view class="name">{{item.push_phone}}<view class="copy-btn" @click="copyPhone(item.push_phone)">复制</view></view>
									<view class="phone">{{item.push_name}}/{{item.push_id_code}}</view>
								</view>
							</view>
						</view>
						<view class="no-data-tips" v-if="activatedList.length == 0">
							<image class="no-data-img" src="../../static/img/no-data-img.png" mode=""></image>
							<view>暂无数据</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<u-modal
			:showModal="isShowModal" 
			title="提示" 
			@cancleModal = "isShowModal = false"
			@confirmModal="generateUpgradeCode"
			>
			<view>
				本次操作将从本金扣除{{money}}，确保您已经向徒弟收费。
			</view>
		</u-modal>
		<u-modal
			:showModal="isShowRulesModal" 
			:title="modalData.team_title" 
			showCancel="false"
			confrimTitle="我已了解"
			@confirmModal="isShowRulesModal = false"
			>
			<view>
				本次操作将从本金扣除{{money}}，确保您已经向徒弟收费。
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		apiPushUserUpgradeCodeStatusList,
		apiPushCreateUpgradeCode,
		apiModelInfo
	} from '../../../http/apis.js'
	import uModal from '../../components/uni-modal/uni-modal.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['token'])
		},
		components: {uModal},
		data(){
			return {
				listType: 'activated',
				isShowRulesModal: false,
				isShowModal: false,
				unactivatedList:[],
				activatedList:[],
				noUsedCode:'',
				generatedNum:'',
				codeAllNum:0,
				codeTips:'未生成',
				unactivatedNum:0,
				activatedNum:0,
				type:false,
				status: 1,
				userStatus: {
					1: '正常',
					2: '监控',
					3: '冻结',
					4: '禁用',
					5: '待审核'
				},
				isShowModal: false,
				modalType: 'rules',
				money: '',
				modalData: {}
			}
		},
		onShow() {
			this.getUserList(1)
			this.getUserList(2)
			apiModelInfo({}).then(res =>{
			    if(res.data.code == 1)  {
					this.modalData = res.data.msg
				}         
			}).catch(res => {
				this.$msg.showToast(res.data.msg)
			})
			
		},
		onLoad() {
			
		},
		methods:{
			getUserList(status){
				apiPushUserUpgradeCodeStatusList({
					token:this.token,
					status: status,
					page: 1,
					pageSize: 999
				}).then(res =>{
				    if(res.data.code == 1)  {
						if (status == 1) {
							this.unactivatedNum = res.data.msg.code_num ? res.data.msg.code_num : 0
							this.unactivatedList = res.data.msg.list
						} else{
							this.activatedNum = res.data.msg.code_num ? res.data.msg.code_num : 0
							this.activatedList = res.data.msg.list
						}
						this.noUsedCode = res.data.msg.no_used_code
						this.codeTips = this.noUsedCode ? '未使用' : '未生成'
						this.money = res.data.msg.upgrade_money
						this.generatedNum = res.data.msg.all_num
					}         
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			changeTab(type){
				this.listType = type
			},
			copyPhone(phone){
				uni.setClipboardData({
					data: phone,
					success: ()=> {
						this.$msg.showToast('复制成功')
					}
				});
			},
			copyCode(){
				if(!this.noUsedCode){
					this.$msg.showToast('请先生成升级码')
					return
				}
				uni.setClipboardData({
					data: this.noUsedCode,
					success: ()=> {
						this.$msg.showToast('复制成功')
					}
				});
			},
			confirmSumbit(){
				uni.navigateTo({
				    url: './upgradeCodeList',
				});
				this.isShowUpgradeModal = false
			},
			getUserStatus (data) {
				return this.userStatus[data]
			},
			toUpgradeCodeList(){
				uni.navigateTo({
					url: './upgradeCodeList'
				})
			},
			generateUpgradeCode(){
				uni.showLoading({
					title: '生成中',
					mask: true
				})
				apiPushCreateUpgradeCode({
					token: this.token
				}).then(res =>{
					uni.hideLoading()
					this.isShowModal = false
				    if(res.data.code == 1)  {
						this.$msg.showToast('生成成功')
						this.codeTips = '未使用'
						this.noUsedCode = res.data.msg
						this.isShowModal = false
						this.getUserList(1)
					} else if (res.data.code == 2003) {
						this.$msg.showToast('升级码数量已达到上限')
						return
					} else if (res.data.code == 2017) {
						this.$msg.showToast('您的本金余额不足')
						return
					} else {
						this.codeTips = ''
						this.$msg.showToast(res.data.msg)
					}        
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #F5F5F5;
	}
	#master-list {
		.header-card {
			 margin: 32upx;
			.card-upper-half {
				background: #FFFFFF;
				text-align: center;
				padding: 48upx 0 24upx 0;
				position: relative;
				.title {
					font-size: 26upx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #333333;
					line-height: 36upx;
				}
				.code {
					width: 440upx;
					height: 104upx;
					background: #F2F2F4;
					font-size: 44upx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #333333;
					line-height: 104upx;
					margin: 24upx auto;
				}
				.tips {
					font-size: 24upx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #666666;
					line-height: 34upx;
				}
				.copy-btn {
					font-size: 26upx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: $theme-color;
					line-height: 36upx;
					text-decoration: underline;
					margin-top: 10upx;
					padding: 20upx 0;
				}
				.card-left-bottom,.card-right-bottom {
					position: absolute;
					width: 20upx;
					height: 20upx;
					border: 1px solid #F5F5F5;
					z-index: 1;
					background: #f5f5f5;
				}
				.card-left-bottom {
					left: -1px;
					bottom: -1px;
					border-radius:0px 20upx 0px 0px;
					border-top: 1px solid #F5F5F5;
					border-right: 1px solid #F5F5F5;
				}
				.card-right-bottom {
					right: -1px;
					bottom: -1px;
					border-radius: 20upx 0px 0px 0px;
					border-top: 1px solid #F5F5F5;
					border-left: 1px solid #F5F5F5;
				}
			}
			.card-lower-half {
				background: #FFFFFF;
				text-align: center;
				padding: 24upx 0 48upx 0;
				position: relative;
				.code-list-btn {
					font-size: 26upx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: $theme-color;
					line-height: 36upx;
					text-decoration: underline;
					padding: 20upx 0;
				}
				.tips{
					font-size: 24upx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #666666;
					line-height: 34upx;
				}
				.generate-btn {
					font-size: 32upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 96upx;
					height: 96upx;
					background: $theme-background-color;
					border-radius: 5px;
					margin: 32upx 32upx 0 32upx;
				}
				.upgrade-code{
					display: flex;
					align-items: center;
					justify-content:space-between;
					.btn{
						font-size: 26upx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: $theme-color;
						line-height: 36upx;
						text-decoration: underline;
						padding: 20upx 0;
						margin: 0 32upx;
					}  
				}
				.card-left-top,.card-right-top {
					position: absolute;
					width: 20upx;
					height: 20upx;
					border: 1px solid #F5F5F5;
					z-index: 1;
					background: #f5f5f5;
				}
				.card-left-top {
					left: -1px;
					top: -1px;
					border-radius:0px 0px 20upx 0px;
					border-top: 1px solid #F5F5F5;
					border-right: 1px solid #F5F5F5;
				}
				.card-right-top {
					right: -1px;
					top: -1px;
					border-radius:0px 0px 0px 20upx;
					border-top: 1px solid #F5F5F5;
					border-right: 1px solid #F5F5F5;
				}
			}
		}
		.page-content {
			.nav-bar {
				text-align: center;
				.nav-tab {
					width: 240upx;
					height: 64upx;
					background: #E9E9E9;
					font-size: 28upx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #999999;
					line-height: 64upx;
					display: inline-block;
					&:nth-child(1){
						border-radius: 10upx 0px 0px 10upx;
					}
					&:nth-child(2){
						border-radius: 0px 10upx 10upx 0px;
					}
					&.active{
						background: #FFFFFF;
						color: #333333;
					}
				}
			}
			.tab-content {
				.inactivated-box {
					.search-box {
						display: flex;
						font-family: PingFang-SC-Medium, PingFang-SC;
						height: 60upx;
						padding: 32upx;
						.status-box{
							border: 1px solid #e0e0e0;
							background: #FFFFFF;
							width: 220upx;
							margin-right: 20upx;
							height: 60upx;
							font-size: 28upx;
							padding-left: 20upx;
							border-radius: 10upx;
							line-height: 60upx;
						}
						.input-box {
							border: 1px solid #e0e0e0;
							background: #FFFFFF;
							flex: 2;
							height: 60upx;
							margin-right: 20upx;
							font-size: 28upx;
							padding-left: 20upx;
							border-radius: 10upx;
							line-height: 60upx;
						}
						.search-btn {
							height: 60upx;
							color: #FFFFFF;
							background: $theme-background-color;
							font-size: 26upx;
							width: 120upx;
							line-height: 60upx;
						}
					}
				}
				.activated-box {
					.search-box {
						display: flex;
						font-family: PingFang-SC-Medium, PingFang-SC;
						height: 60upx;
						padding: 32upx;
						.status-box{
							border: 1px solid #e0e0e0;
							background: #FFFFFF;
							width: 140upx;
							margin-right: 20upx;
							height: 60upx;
							font-size: 24upx;
							padding-left: 10upx;
							border-radius: 10upx;
							line-height: 60upx;
						}
						.order-status-box {
							border: 1px solid #e0e0e0;
							background: #FFFFFF;
							width: 120upx;
							margin-right: 20upx;
							height: 60upx;
							font-size: 24upx;
							padding-left: 10upx;
							border-radius: 10upx;
							line-height: 60upx;
						}
						.input-box {
							border: 1px solid #e0e0e0;
							background: #FFFFFF;
							flex: 2;
							height: 60upx;
							margin-right: 20upx;
							font-size: 24upx;
							padding-left: 10upx;
							border-radius: 10upx;
							line-height: 60upx;
						}
						.search-btn {
							height: 60upx;
							color: #FFFFFF;
							background: $theme-background-color;
							font-size: 26upx;
							width: 100upx;
							line-height: 60upx;
							padding: 0 10upx;
						}
					}
					
				}
				.list {
					.list-card {
						margin: 0 32upx 32upx 32upx;
						border-radius: 24upx;
						background: #FFFFFF;
						.list-card-header {
							display: flex;
							align-items: center;
							position: relative;
							
							.header-img {
								margin: 50upx 34upx 32upx 32upx;
								width: 104upx;
								height: 104upx;
								border-radius: 50%;
							}
							.phone-name {
								margin-top: 20upx;
								display: flex;
								flex-direction: column;
								justify-content: space-around;
								height: 104upx;
								box-sizing: border-box;
								flex: 1;
								.name {
									font-size: 28upx;
									font-family: PingFangSC-Semibold, PingFang SC;
									font-weight: 600;
									color: #333333;
									line-height: 40upx;
								}
								.copy-btn {
									display: inline-block;
									font-size: 28upx;
									font-family: PingFang-SC-Medium, PingFang-SC;
									font-weight: 500;
									color: #FF5001;
									line-height: 36upx;
									margin-left: 10upx;
								}
								.phone {
									font-size: 28upx;
									font-family: PingFang-SC-Medium, PingFang-SC;
									font-weight: 500;
									color: #333333;
									line-height: 28upx;
								}
							}
							.freeze-btn {
								border-radius: 30upx;
								border: 1px solid $theme-color;
								font-size: 26upx;
								font-family: PingFang-SC-Medium, PingFang-SC;
								font-weight: 500;
								color: $theme-color;
								line-height: 36upx;
								padding: 6upx 32upx;
								margin-right: 32upx;
							}
							.status {
								margin-right: 32upx;
								margin-top: 20upx;
								.check-status {
									border-radius: 30upx;
									border: 1px solid $theme-color;
									color: $theme-color;
									padding: 6upx 32upx;
									font-size: 26upx;
								}
								.remark {
									font-size: 28upx;
									font-family: PingFang-SC-Medium, PingFang-SC;
									font-weight: 500;
									color: #333333;
									line-height: 40upx;
									text-align: right;
									
								}
							}
						}
						.list-card-content {
							.content-cell{
								display: flex;
								justify-content:space-between;
								align-items: center;
								font-size: 28upx;
								font-family: PingFang-SC-Medium, PingFang-SC;
								font-weight: 500;
								color: #333333;
								line-height: 40upx;
								padding: 10upx 32upx;
								.cell {
									color: $theme-color;
								}
							}
						}
					}
				}
			}
		}
		.no-data-tips {
			text-align: center;
			font-size: 28upx;
			font-weight: 400;
			color: #999999;
			line-height: 28upx;
			.no-data-img {
				width: 300upx;
				height: 300upx;
				margin-top: 30upx;
				margin-bottom: 20upx;
			}
		}
	}
</style>

